<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
	</body>
	<script type="text/javascript">
		var sun = new Image;
		var moon = new Image;
		var earth = new Image;
		
		function init(){
			sun.src = "img/Canvas_sun.png";
			moon.src = "img/Canvas_moon.png";
			earth.src = "img/Canvas_earth.png";
			
			window.requestAnimationFrame(draw);
			
		}
		
		function draw(){
			var context = document.getElementById("canvas").getContext("2d");
			
			var time = new Date();
			s = time.getSeconds();
			milliSeconds = time.getMilliseconds();
			angle = 2*Math.PI / 60 * s + 2 * Math.PI / (60*1000)*milliSeconds;
			
			context.save();
			context.drawImage(sun,0,0);
			context.translate(150,150);
			context.strokeStyle = "blue";
			context.lineWidth = 3;
			context.beginPath();
			
			context.arc(0,0,100,0,Math.PI*2,true);
			context.closePath();
			context.stroke();
			
			//画地球
			context.save();
			context.rotate(angle);
			context.translate(90,0);
			context.drawImage(earth,0,0);
			
			context.save();
			context.rotate(angle*10);
			context.translate(15,5);
			context.drawImage(moon,20,20);
			//画月亮
			context.save();
			context.rotate(angle*10);
			context.translate(15,5);
			context.drawImage(moon,20,20);
			context.restore();
			context.restore();
			
			context.restore();
			context.restore();
			window.requestAnimationFrame(draw);
		}
		init();
	</script>
</html>
